<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .el-header, .el-footer {
            background-color: #B3C0D1;
            color: #333;
            text-align: center;
            line-height: 60px;
        }

        .el-main {
            background-color: #E9EEF3;
            color: #333;
            text-align: center;
            line-height: 160px;

        }

        body > .el-container {
            margin-bottom: 40px;
        }

        .el-container:nth-child(5) .el-aside,
        .el-container:nth-child(6) .el-aside {
            line-height: 260px;
        }

        .el-container:nth-child(7) .el-aside {
            line-height: 320px;
        }
        .el-table__header tr,
        .el-table__header th {
            padding: 0;
            height: 30px;
            line-height: 30px;
        }
        .el-table__body tr,
        .el-table__body td {
            padding: 0;
            height: 80px;
            line-height: 80px;
        }
    </style>
</head>
<body>
<div id="my">
    <el-container>
        <el-header>
            <el-row>
                <el-col :span="4"><div class="grid-content bg-purple">
                    <h3>排班情况</h3>
                </div></el-col>
                <el-col :span="12"><div class="grid-content bg-purple-light">
                    <template>
                        <el-select v-model="inp.id" clearable placeholder="科室">
                            <el-option
                                    v-for="item in departmentone"
                                    :key="item.id"
                                    :label="item.oname"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </template>
                    <el-button icon="el-icon-search" circle @click="searchDep"></el-button>
                </div></el-col>
                <el-col :span="8"><div class="grid-content bg-purple">
                    <el-button v-if="getfather == 1" type="primary"  @click="showSchedule">排班安排</el-button>
                </div></el-col>
            </el-row>
        </el-header>
        <el-main>
            <template>
                <el-table
                        :data="tableData"
                        border
                        :header-cell-style="{textAlign:'center'}"
                        :cell-style="{textAlign:'center'}"
                        style="width: 100%">
                    <el-table-column
                            label="姓名"
                            min-width="100"
                            >
                        <template slot-scope="scope">
                            <el-button @click="handleClick(scope.row)" type="text" size="small">{{scope.row.aname}}</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="oname"
                            label="科室"
                            min-width="120"
                            >
                    </el-table-column>
                    <el-table-column
                            :label="tableDates[0]"
                            min-width="120"
                            >
                        <template slot-scope="scope">
                            <el-tag
                                    style="height: 120px"
                                    :key="aa.eid"
                                    v-for="aa in scope.row.dem"
                                    v-if="aa.registrationdate==tableDates[0]"
                            >
                                上午号码:{{aa.upname}}<br>
                                下午号码：{{aa.downname}}<br>
                                已挂号码:{{aa.lastnumber}}<br>
                                价格:{{aa.price}}元
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column
                            :label="tableDates[1]"
                            min-width="120"
                            >
                        <template slot-scope="scope">
                            <el-tag
                                    style="height: 120px"
                                    :key="bb.eid"
                                    v-for="bb in scope.row.dem"
                                    v-if="bb.registrationdate==tableDates[1]"
                                    height="50"
                            >
                                上午号码:{{bb.upname}}<br>
                                下午号码：{{bb.downname}}<br>
                                已挂号码:{{bb.lastnumber}}<br>
                                价格:{{bb.price}}元
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column
                            :label="tableDates[2]"
                            min-width="120">
                        <template slot-scope="scope">
                            <el-tag
                                    style="height: 120px"
                                    :key="cc.eid"
                                    v-for="cc in scope.row.dem"
                                    v-if="cc.registrationdate==tableDates[2]"
                            >
                                上午号码:{{cc.upname}}<br>
                                下午号码：{{cc.downname}}<br>
                                已挂号码:{{cc.lastnumber}}<br>
                                价格:{{cc.price}}元
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column
                            :label="tableDates[3]"
                            min-width="120">
                        <template slot-scope="scope">
                            <el-tag
                                    style="height: 120px"
                                    :key="dd.eid"
                                    v-for="dd in scope.row.dem"
                                    v-if="dd.registrationdate==tableDates[3]"
                                    >
                                上午号码:{{dd.upname}}<br>
                                下午号码：{{dd.downname}}<br>
                                已挂号码:{{dd.lastnumber}}<br>
                                价格:{{dd.price}}元
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column
                            :label="tableDates[4]"
                            min-width="120">
                        <template slot-scope="scope">
                            <el-tag
                                    style="height: 120px"
                                    :key="ee.eid"
                                    v-for="ee in scope.row.dem"
                                    v-if="ee.registrationdate==tableDates[4]"
                                    >
                                上午号码:{{ee.upname}}<br>
                                下午号码：{{ee.downname}}<br>
                                已挂号码:{{ee.lastnumber}}<br>
                                价格:{{ee.price}}元
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column
                            :label="tableDates[5]"
                            min-width="120">
                        <template slot-scope="scope">
                            <el-tag
                                    style="height: 120px"
                                    :key="ff.eid"
                                    v-for="ff in scope.row.dem"
                                    v-if="ff.registrationdate==tableDates[5]"
                                    >
                                上午号码:{{ff.upname}}<br>
                                下午号码：{{ff.downname}}<br>
                                已挂号码:{{ff.lastnumber}}<br>
                                价格:{{ff.price}}元
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column
                            :label="tableDates[6]"
                            min-width="120">
                        <template slot-scope="scope">
                            <el-tag
                                    style="height: 120px"
                                    :key="gg.eid"
                                    v-for="gg in scope.row.dem"
                                    v-if="gg.registrationdate==tableDates[6]"
                                    >
                                上午号码:{{gg.upname}}<br>
                                下午号码：{{gg.downname}}<br>
                                已挂号码:{{gg.lastnumber}}<br>
                                价格:{{gg.price}}元
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="操作"
                            min-width="100">
                        <template slot-scope="scope">
                            <el-button  type="text" size="small" @click="showDelete(scope.row.id)">删除</el-button>
                            <el-button  type="text" size="small" @click="showupdateSchedule(scope.row.id)">修改</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
        </el-main>
        <div class="block">
            <span class="demonstration">总数</span>
            <el-pagination
                    background
                    @current-change="handleCurrentChange"
                    :page-size="7"
                    layout="total, prev, pager, next"
                    :total="sum">
            </el-pagination>
        </div>
    </el-container>
    <el-dialog title="添加医生排班" :visible.sync="addSchedule">
        <el-form :model="addForm" ref="addForm" :rules="rules">
            <el-form-item label="医生" prop="aid" >
                    <el-select v-model="name" placeholder="请选择科室" @change="listDoctor(name)">
                        <el-option
                                v-for="a in departmenttwo"
                                :key="a.id"
                                :label="a.oname"
                                :value="a.id"
                        >
                        </el-option>
                    </el-select>
                    <el-select v-model="addForm.aid" placeholder="请选择医生" >
                        <el-option
                                v-for="a in doctors"
                                :key="a.id"
                                :label="a.aname"
                                :value="a.id">
                        </el-option>
                    </el-select>
            </el-form-item>
            <el-form-item label="价格" prop="priceid">
                <el-select v-model="addForm.priceid" placeholder="请选择价格" >
                    <el-option
                            v-for="a in addPrice"
                            :key="a.id"
                            :label="a.price"
                            :value="a.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="上午人数"  prop="uptotalnumber">
                <el-input v-model="addForm.uptotalnumber" autocomplete="off" name="uptotalnumber" style="width:200px"></el-input>
            </el-form-item>
            <el-form-item label="下午人数"  prop="downtotalnumber">
                <el-input v-model="addForm.downtotalnumber" autocomplete="off" name="downtotalnumber" style="width:200px"></el-input>
            </el-form-item>
            <el-form-item label="日期"  prop="dateid">
                <el-select v-model="addForm.dateid" placeholder="请选择日期" name="dateid" style="width:200px">
                    <el-option
                            v-for="a in addDate"
                            :key="a.id"
                            :label="a.registrationdate"
                            :value="a.id">
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="addSchedule = false">取 消</el-button>
            <el-button type="primary" @click="addSche('addForm')">确 定</el-button>
        </div>
    </el-dialog>
    </el-container>
    <el-dialog title="删除医生排班" :visible.sync="deleteSchedule">
        <el-form :model="deleteForm" ref="deleteForm" :rules="rules">
            <el-form-item label="日期"  prop="dateid">
                <el-select v-model="deleteForm.dateid" placeholder="请选择日期" name="dateid" style="width:200px">
                    <el-option
                            v-for="a in deleteDate"
                            :key="a.id"
                            :label="a.registrationdate"
                            :value="a.id">
                    </el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="deleteSchedule = false">取 消</el-button>
            <el-button type="primary" @click="deleteSch">确 定</el-button>
        </div>
    </el-dialog>
    <el-dialog title="修改医生排班" :visible.sync="updateSchedule">
        <el-form :model="updateForm" ref="updateForm" :rules="rules">
            <el-form-item label="日期"  prop="dateid">
                <el-select v-model="updateForm.dateid" placeholder="请选择日期" @change="getNumber"  style="width:200px">
                    <el-option
                            v-for="a in updateDate"
                            :key="a.id"
                            :label="a.registrationdate"
                            :value="a.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="上午人数"  prop="uptotalnumber">
                <el-input v-model="updateForm.uptotalnumber" autocomplete="off"  style="width:200px"></el-input>
            </el-form-item>
            <el-form-item label="下午人数"  prop="downtotalnumber">
                <el-input v-model="updateForm.downtotalnumber" autocomplete="off"  style="width:200px"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="updateSchedule = false">取 消</el-button>
            <el-button type="primary" @click="updateSche('updateForm')">确 定</el-button>
        </div>
    </el-dialog>
</div>
<script>

    var he=new Vue({
        el:"#my",
        data:{
            msg:'',
            inp:{
                id:''
            },
            sum:0,
            getfather:1,
            addForm:{},
            deleteForm:{
                aid:'',
                dateid:''
            },
            updateForm:{},
            addSchedule:false,
            updateSchedule:false,
            deleteSchedule:false,
            departmentone:[],
            departmenttwo:[],
            addDate:[],
            addPrice:[],
            doctors:[],
            deleteDate:[],
            updateDate:[],
            name:'',
            tableData:[],
            tableDates:[""],
            rules:{
                aid: [
                    { required: true, message: '请选择医生', trigger: 'blur' },
                ],
                price: [
                    { required: true, message: '请选择价格', trigger: 'blur' },
                ],
                uptotalnumber: [
                    {required: true, message: '请输入挂号人数', trigger: 'blur' },
                    {min: 1,max: 2, message: '不能超过30人', trigger: 'blur' }
                ],
                downtotalnumber: [
                    {required: true, message: '请输入挂号人数', trigger: 'blur' },
                    {min: 1,max: 2, message: '不能超过30人', trigger: 'blur' }
                ],
                dateid: [
                    { required: true, message: '请选择日期', trigger: 'blur' },
                ]
            }
        },
        methods:{
            searchDep(){
                getschedule(1,7)
            },
            handleCurrentChange(val) {
                getschedule(val,7)
            },
            showSchedule(){
                he.addSchedule=true;
                $.get("/demo/dep/indep",function (backData) {
                    he.departmenttwo=backData.data.de;
                    he.addDate=backData.data.da;
                    he.addPrice=backData.data.pr;
                })
            },
            listDoctor(id){
                he.form={};
                $.get("/demo/dep/listdoc/"+id,function (backData) {
                    he.doctors=backData.data;
                })
            },
            addSche(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        $.post("/demo/sch/add",he.addForm,function (backData) {
                            he.msg=backData.msg;
                            if(backData.code==1){
                                he.$message({
                                    showClose: true,
                                    message: '排班成功',
                                    type: 'success'
                                });
                                he.$refs[formName].resetFields();
                                getschedule(1,7);
                            }else{
                                he.$message({
                                    showClose: true,
                                    message: he.msg,
                                    type: 'warning'
                                });
                            }
                        })
                    }
                });
            },
            showDelete(id){
                he.deleteSchedule=true;
                he.deleteForm.aid=id;
                $.get("/demo/sch/getdeletedate",function (backData) {
                    if(backData.code==1){
                        he.deleteDate=backData.data;
                    }
                })
            },
            deleteSch(){
                    $.post("/demo/sch/delete",he.deleteForm,function (backData) {
                        he.msg=backData.msg;
                        if(backData.code==1){
                            he.$message({
                                showClose: true,
                                message: '删除成功',
                                type: 'success'
                            });
                            getschedule(1,7)
                            he.deleteSchedule=false;
                        }else{
                            he.$message({
                                showClose: true,
                                message: he.msg,
                                type: 'warning'
                            });
                        }
                    })
            },
            showupdateSchedule(id){
                he.updateSchedule=true;
                he.updateForm.aid=id;
                $.get("/demo/sch/getSch",function (backData) {
                    if(backData.code==1){
                        he.updateDate=backData.data;
                    }
                })
            },
            getNumber(){
              $.post("/demo/sch/getnumber",he.updateForm,function (backData) {
                  if(backData.data!=null){
                      he.updateForm=backData.data;
                  }else{
                      he.updateForm.uptotalnumber='';
                      he.updateForm.downtotalnumber='';
                  }
              })
            },
            updateSche(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        $.post("/demo/sch/updateSch",he.updateForm,function (backData) {
                            he.msg=backData.msg;
                            if(backData.code==1){
                                he.$message({
                                    showClose: true,
                                    message: '修改成功',
                                    type: 'success'
                                });
                                he.$refs[formName].resetFields();
                                getschedule(1,7);
                                he.updateSchedule=false;
                            }else{
                                he.$message({
                                    showClose: true,
                                    message:he.msg,
                                    type: 'warning'
                                });
                            }
                        })
                    }
                })
            },
        }
    });
    $.get("/demo/dep/outdep",function (backData) {
        he.departmentone=backData.data;
    });
    function getschedule(c,b) {
        he.inp.page=c;
        he.inp.pageCount=b;
        $.post("/demo/sch/list",he.inp,function (backData) {
            he.tableData=backData.data.sche;
            he.sum=backData.data.sum;
            he.tableDates=backData.data.listDate;
        })
    };
    getschedule(1,7);
</script>
</body>
</html>